<template>
    <section>
        <!--顶部查询条件-->
      <div class="searchArea">
        <Form :model="cscpPost" :label-width="80">
          <Row :gutter="48">
            <Col span="8">
              <FormItem label="岗位编码">
                <Input v-model="cscpPost.postCode" placeholder="岗位编码 like" clearable></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="岗位名称">
                <Input v-model="cscpPost.postName" placeholder="岗位名称 like" clearable></Input>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="状态">
                <Select v-model="cscpPost.status" placeholder="状态 =" class="query-model" clearable>
                  <Option value="1">选项一</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <!--查询按钮-->
              <FormItem style="text-align: right">
                <Button  type="primary" @click="search">查询</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="tableBtn">
        <!--新建按钮-->
        <Button type="primary" icon="md-add"  @click="create" style="margin-right: 16px">新增</Button>
        <!--导出按钮-->
        <Button type="primary" icon="ios-cloud-download" @click="handleExport">导出</Button>
      </div>
        <Table border :columns="columns" :data="tableData"></Table>
        <div class="page-area">
            <Page :total="pageTotal" :page-size="pageLength" @on-change="handlePageChange" show-total show-elevator/>
        </div>
    </section>
</template>
<script>
export default {
  name: 'cscpPostList',

  data () {
    return {
      // 分页参数
      pageLength: 6, // 每页条数
      pageTotal: 0, // 总数
      pageOffset: 0, // 页码
      // 查询参数
      cscpPost: {
        postCode: null,
        postName: null,
        status: null
      },
      columns: [
        {
          key: 'postCode',
          title: '岗位编码'
        },
        {
          key: 'postName',
          title: '岗位名称'
        },
        {
          key: 'postSort',
          title: '排序'
        },
        {
          key: 'status',
          title: '状态'
        },
        {
          key: 'createTime',
          title: '创建时间'
        },

        {
          title: '操作',
          align: 'center',
          width: 190,
          key: 'postId',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row.postId)
                    }
                  }
                },
                '编辑'
              ),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.delete(params.row.postId)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      tableData: []
    }
  },
  mounted () {
    this.listTable()
  },
  methods: {
    formatTime (UTCDateString) {
      if (!UTCDateString) {
        return '-'
      }
      function formatFunc (str) { // 格式化显示
        return str > 9 ? str : '0' + str
      }
      var date2 = new Date(UTCDateString) // 这步是关键
      var year = date2.getFullYear()
      var mon = formatFunc(date2.getMonth() + 1)
      var day = formatFunc(date2.getDate())
      var hour = date2.getHours()
      var min = formatFunc(date2.getMinutes())
      var second = date2.getSeconds()
      var dateStr = year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second
      return dateStr
    },
    // 渲染表格数据
    listTable () {
      let _this = this
      const [url, param] = [
        '/api/cscpPosts', {
          params: {
            page: _this.pageOffset,
            size: _this.pageLength,
            'postCode.contains': _this.cscpPost.postCode ? _this.cscpPost.postCode : null,
            'postName.contains': _this.cscpPost.postName ? _this.cscpPost.postName : null,
            'status.equals': _this.cscpPost.status ? _this.cscpPost.status : null
          }
        }
      ]
      _this.$http.get(url, param).then(function (response) {
        _this.tableData = []
        let data = response.data
        _this.pageTotal = data.recordsTotal
        let list = data.data
        for (let i = 0; i < list.length; i++) {
          let map = {
            postId: list[i].postId,
            postCode: list[i].postCode,
            postName: list[i].postName,
            postSort: list[i].postSort,
            status: list[i].status,
            createBy: list[i].createBy,
            createTime: list[i].createTime,
            updateBy: list[i].updateBy,
            updateTime: list[i].updateTime,
            remark: list[i].remark
          }
          _this.tableData.push(map)
        }
      })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 新建
    create () {
      this.$router.push({
        name: 'cscp_post_item'
      })
    },
    // 编辑
    edit (id) {
      this.$router.push({
        name: 'cscp_post_item',
        query: {
          id: id
        }
      })
    },
    // 删除
    delete (id) {
      let _this = this
      this.$Modal.confirm({
        title: '确定删除？',
        onOk () {
          _this.$http.delete('/api/cscpPosts/' + id).then(response => {
            if (response.status === 200) {
              _this.$Notice.success({
                title: '删除成功'
              })
              _this.listTable()
            } else {
              _this.$Notice.error({
                title: '删除失败'
              })
            }
          })
        }
      })
    },
    // 查询
    search () {
      this.pageOffset = 0
      this.listTable()
    },
    handlePageChange (current) {
      this.pageOffset = current - 1
      this.listTable()
    },
    // 导出按钮
    handleExport () {
      this.$Modal.confirm({
        title: '是否确认导出所有数据项？',
        onOk () {
          this.$http.defaults.timeout = 15000 * 60
          this.$http.post(`/api/cscpPosts/export`, {}, {
            responseType: 'blob'
          }).then(res => {
            const link = document.createElement('a')
            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$Notice.success({
              title: '导出数据成功'
            })
          }).catch(() => {
            this.$Notice.error({
              title: '导出数据失败'
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '../admin/styles/formStyle.less';
    .query-model {
        width: 100%;
    }

    .page-area {
        display: flex;
        justify-content: flex-end;
        padding-top: 35px;
        padding-right: 50px;
    }
</style>
